<template>
	<div>
	<Cityheader></Cityheader>
	<Citysearch :cities="cities"></Citysearch>
	<Citylist 
		:cities="cities" 
		:hot="hotCities"
		:letter="letter"
		>	
		</Citylist>
	<Cityalphabet 
		:cities="cities"
		@change="handleLetterChange"
	></Cityalphabet>
	</div>
</template>

<script>
import axios from 'axios'
import Cityheader from './components/header.vue';
import Citysearch from './components/search.vue';
import Citylist from './components/list.vue';
import Cityalphabet from './components/alphabet.vue';
export default {
	name: 'City',
	components: {
		Cityheader,
		Citysearch,
		Citylist,
		Cityalphabet
	},
	data () {
		return {
			cities: {},
			hotCities: [],
			letter: ''
		}
	},
	methods: {
		getCityInfo () {
			axios.get('/api/city.json')
				.then(this.handleGetCityInfoSucc)
		},
		 handleGetCityInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.cities = data.cities
        this.hotCities = data.hotCities
      }
    },
		 handleLetterChange (letter) {
      this.letter = letter
    }
  },
	mounted () {
    this.getCityInfo()
  }
}
</script>

<style lang="stylus" scoped>
	
</style>